import {Theme} from './page.js';
import {JSXAttributes, useElement} from './core/element.js';

const name = 's-divider';
const props = {};

const style = () => `
:host {
  display: block;
  height: 1px;
  flex-shrink: 0;
  background: var(--s-color-outline-variant, ${Theme.colorOutlineVariant});
  margin: 0 16px;
}
`;

const template = () => `<slot></slot>`;

export class Divider extends useElement({
    style: style(),
    template: template(),
    props
}) {
}

Divider.define(name);

declare global {
    namespace JSX {
        interface IntrinsicElements {
            [name]: Partial<typeof props> & JSXAttributes;
        }
    }

    interface HTMLElementTagNameMap {
        [name]: Divider;
    }
}

//@ts-ignore
declare module 'vue' {
    export interface GlobalComponents {
        [name]: typeof props;
    }
}
